<template>
  <div>
    <section>
      <img
        :src="brandData.app_list_pic_url"
        :alt="brandData.name"
      >
      <h4>{{brandData.name}}</h4>
    </section>
    <p>{{brandData.simple_desc}}</p>
    <ProductResult :goodsList="brandGoodslist" />
  </div>
</template>

<script>
import { GetBrandData, GetBrandGoodsData } from "@/request/api";
import ProductResult from "@/components/SearchPopup/SearchProduct/ProductResult/ProductResult.vue";
export default {
  data() {
    return {
      brandData: [],
      //品牌商品请求参数
      params: {
        brandId: 0,
        page: 1,
        size: 10,
      },
      brandGoodslist: [],
    };
  },
  async created() {
    //品牌详情数据
    let brandId = this.$route.query.brandId;
    let res = await GetBrandData({ params: { id: brandId } });
    // console.log("品牌数据",res.data);
    if (res.errno !== 0) {
      return this.$toast.fail("请求品牌数据失败！");
    }
    this.brandData = res.data.brand;
    //品牌商品数据
    this.params.brandId = brandId;
    let res_goods = await GetBrandGoodsData({ params: this.params });
    // console.log("品牌商品数据", res_goods.data);
    if (res.errno !== 0) {
      return this.$toast.fail("请求品牌商品数据失败！");
    }
    //谢特，后台数据是空的
    this.brandGoodslist = res_goods.data.goodsList;
  },
  components: { ProductResult },

  computed: {},

  methods: {},
};
</script>

<style lang='less' scoped>
section {
  position: relative;
  img {
    width: 100%;
  }
  h4 {
    color: #fff;
    font-size: 0.18rem;
    line-height: 0.2rem;
    position: absolute;
    top: 50%;
    margin-top: -0.1rem;
    left: 0%;
    width: 100%;
    text-align: center;
  }
}
p {
  background-color: #fff;
  color: #666;
  font-size: 0.16rem;
  padding: 0.2rem 0.1rem;
  line-height: 0.25rem;
  text-align: center;
  vertical-align: middle;
}
</style>